<template>
    <div class="madp-user-dept">
        <basic-container>
            <div class="madp-search-form">
                <el-form label-width="100px">
                    <el-form-item label="部门名称:">
                        <el-input maxlength="20" class="madp-input" v-model.trim="searchT" placeholder="请输入部门名称" clearable></el-input>
                    </el-form-item>
                </el-form>
                <div>
                    <el-button class="madp-ml10" type="primary" @click="handleSearch">搜索</el-button>
                    <el-button v-if="permissions.sys_dept_add" type="primary" @click="handleAdd">添加</el-button>
                </div>
            </div>
            <div v-loading="tableloading">
                <el-table
                    :data="tableData"
                    style="madp-table"
                    row-key="id"
                    border
                    :default-expand-all="expandAll"
                    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
                    v-if="!tableloading"
                >
                    <el-table-column prop="name" label="部门名称"></el-table-column>
                    <el-table-column prop="orgCode" label="机构号">
                        <template slot-scope="scope">{{ scope.row.orgCode || '--' }}</template>
                    </el-table-column>
                    <el-table-column prop="deptType" label="部门类型" width="100">
                        <template slot-scope="scope">{{ scope.row.deptType == '0' ? '机构' : '条线' }}</template>
                    </el-table-column>
                    <el-table-column prop="sort" label="排序" width="60"></el-table-column>
                    <el-table-column prop="createTime" label="创建时间" width="200"></el-table-column>
                    <el-table-column label="操作" width="120" v-if="permissions.sys_dept_edit || permissions.sys_dept_del">
                        <template slot-scope="scope">
                            <div v-if="scope.row.isHead && scope.row.deptType === 1">
                                <el-button v-if="permissions.sys_dept_edit" type="text" @click="handleEdit(scope.row)">修改</el-button>
                                <el-button v-if="permissions.sys_dept_del" type="text" @click="handleDel(scope.row)">删除</el-button>
                            </div>
                            <div v-else>--</div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </basic-container>
        <el-dialog :title="dialogTitle" :visible.sync="dialogShow" width="50%" :close-on-click-modal="false">
            <el-form v-if="dialogShow" ref="form" label-width="120px" :model="form" :rules="rules">
                <el-form-item label="部门名称:" prop="name">
                    <el-input v-model.trim="form.name" placeholder="请输入部门名称" maxlength="20"></el-input>
                </el-form-item>
                <el-form-item label="部门类型:" prop="deptType">
                    <el-select v-model="form.deptType">
                        <el-option label="条线" :value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="部门排序:">
                    <el-input v-model.trim="form.sort" placeholder="请输入部门排序" type="number" @input="numberChange" @change="numberChange"></el-input>
                </el-form-item>
            </el-form>
            <template slot="footer">
                <el-button type="primary" @click="handleSubmit">确定</el-button>
                <el-button @click="handleCancle">取消</el-button>
            </template>
        </el-dialog>
    </div>
</template>
<script>
import { addObj, delObj, fetchTree, getObj, putObj } from '@/api/admin/dept';
import { mapGetters } from 'vuex';
export default {
    name: 'madp-user-dept',
    data() {
        return {
            expandAll: false, // 是否展开所有子节点
            searchT: '', // 搜索框文本内容
            tableData: [], // 表格数据
            tableloading: false, // 表格loading
            dialogShow: false, // 弹窗开关
            // 表单对象
            form: {
                name: '',
                deptType: 1,
                sort: ''
            },
            // 表单校验rule
            rules: {
                name: [
                    {
                        required: true,
                        message: '请输入部门名称',
                        trigger: 'blur'
                    }
                ],
                deptType: [
                    {
                        required: true,
                        message: '请选择部门类型',
                        trigger: 'change'
                    }
                ]
            },
            // 弹窗标题
            dialogTitle: ''
        };
    },
    computed: {
        ...mapGetters(['permissions'])
    },
    created() {
        this.getList();
    },
    methods: {
        // 查询
        handleSearch() {
            this.getList();
        },
        // 点击新增按钮
        handleAdd() {
            this.dialogTitle = '新增';
            this.form = { name: '', deptType: 1, sort: '' };
            this.dialogShow = true;
        },
        // 点击编辑按钮
        handleEdit(data) {
            this.dialogTitle = '编辑';
            this.form = JSON.parse(JSON.stringify(data));
            this.dialogShow = true;
        },
        // 点击删除按钮
        handleDel(data) {
            this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    delObj(data.id).then(() => {
                        this.getList();
                        this.$notify({
                            title: '成功',
                            message: '删除成功',
                            type: 'success',
                            duration: 2000
                        });
                    });
                })
                .catch(() => {});
        },
        // 弹窗点击取消按钮
        handleCancle() {
            this.dialogShow = false;
        },
        // 弹窗点击确定按钮
        handleSubmit() {
            this.$refs.form.validate((valid) => {
                if (!valid) return;
                if (this.dialogTitle == '新增') {
                    addObj(this.form)
                        .then(() => {
                            this.getList();
                            this.$notify({
                                title: '成功',
                                message: '创建成功',
                                type: 'success',
                                duration: 2000
                            });
                            this.dialogShow = false;
                        })
                        .catch(() => {});
                } else if (this.dialogTitle == '编辑') {
                    this.form.deptId = this.form.id;
                    delete this.form.id;
                    putObj(this.form)
                        .then(() => {
                            this.getList();
                            this.$notify({
                                title: '成功',
                                message: '更新成功',
                                type: 'success',
                                duration: 2000
                            });
                            this.dialogShow = false;
                        })
                        .catch(() => {});
                }
            });
        },
        // 数字修改
        numberChange(val) {
            let num = parseInt(Number(val.replace('.', '')));
            this.form.sort = num < 0 ? 0 : Math.min(num, 100);
        },
        // 表格数据获取
        getList() {
            let obj = {
                name: this.searchT
            };
            this.tableloading = true;
            this.expandAll = Boolean(this.searchT);
            fetchTree(obj)
                .then((response) => {
                    let arr = response.data.data;
                    arr = arr.map((i) => {
                        i.isHead = true;
                        return i;
                    });
                    this.tableData = arr;
                    this.tableloading = false;
                    this.$forceUpdate();
                })
                .catch(() => {
                    this.tableloading = false;
                });
        }
    }
};
</script>
<style scoped lang="scss">
.madp-search-form {
    display: flex;
}
.madp-user-dept {
    // .madp-table-head {
    //     text-align: left !important;
    // }
    // /deep/ .el-table--border th.el-table__cell,
    // /deep/ .el-table__fixed-right-patch,
    // /deep/ .el-table th.el-table__cell > .cell,
    /deep/ .el-table__cell:first-child .cell {
        text-align: left !important;
    }
    // /deep/ .el-table .cell,
    // /deep/ .el-table--border .el-table__cell:first-child .cell {
    //     text-align: left !important;
    // }
}
.madp-table-name {
    padding-left: 24px;
}
</style>
